<script setup>
import { ref, defineProps } from 'vue';
import { onMounted } from 'vue';
import axios from "axios";
import {ElMessage} from "element-plus";
import { computed } from 'vue';
// 定义从父组件接收的 props
const props = defineProps({
  process: Number,
  applyuName: String,
  promoteuName: String,
  applyprofilePhoto: String,
  promoteprofilePhoto: String,
  passageID: Number,
  adoptID:Number,
  applyuserID:Number
});

onMounted(() => {
  
  console.log("接收到的参数：");
  console.log("process:", props.process);
  console.log("applyuName:", props.applyuName);
  console.log("promoteuName:", props.promoteuName);
  console.log("applyprofilePhoto:", props.applyprofilePhoto);
  console.log("promoteProfilePhoto:", props.promoteprofilePhoto);
  console.log("passageID:", props.passageID);
  const storedShowbtn = sessionStorage.getItem(`showbtn-${props.passageID}-${userID}`);
    if (storedShowbtn !== null) {
        showbtn.value = storedShowbtn === 'true';
    }
 
});
let showbtn=ref(true);
const process1 = computed(() => props.process);
const userData = JSON.parse(sessionStorage.getItem('token'));
const userID = userData.userID;
const Identify=userID==props.applyuserID?2:1;

// 设置axios的默认请求头，用于后续请求携带token
axios.defaults.headers.common['Authorization'] = `${userData.token}`;
const adoptsuccuss=async ()=>{
  try{
        const response =  await axios.post(`http://localhost:8080/adopt/application/updateprogress`, {
            adopt_id: props.adoptID,
            adopt_process: 4,
        });
        const result = response.data;
        console.log(result);
        if (response.status === 200){
                // 可以根据需要添加更多逻辑，比如刷新页面数据、更新相关状态等
                    ElMessage({
                        message: '恭喜领养成功！快去评价对方吧~',
                        type: 'success',
                        style: 'font-size:25px;font-weight:bold;',
                        offset: 55,
                        grouping:true
                    })
        }
    }catch (error){
        alert('网络错误，请稍后再试');
        console.log("error");
    }
    setTimeout(() => {
        window.location.reload();  // 刷新页面
      }, 500); // 500毫秒
};
const adoptfail=async()=>{
  try{
        const response =  await axios.post(`http://localhost:8080/adopt/application/updateprogress`, {
            adopt_id: props.adoptID,
            adopt_process: -1,
        });
        const result = response.data;
        console.log(result);
        if (response.status === 200){
                // 可以根据需要添加更多逻辑，比如刷新页面数据、更新相关状态等
                    ElMessage({
                        message: '已终止该领养进程！',
                        type: 'success',
                        style: 'font-size:25px;font-weight:bold;',
                        offset: 55,
                        grouping:true
                    })
        }
    }catch (error){
        alert('网络错误，请稍后再试');
        console.log("error");
    }

    setTimeout(() => {
        window.location.reload();  // 刷新页面
      }, 500); // 500毫秒
};
let dialogVisible = ref(false); // 控制弹窗的显示状态
let stars = ref(0); // 评价星级
const textarea = ref(''); // 输入的评价内容

const Makeappraise= async ()=>{

    try{
        const response =  await axios.post(`http://localhost:8080/adopt/application/Evaluate`, {
            adopt_id: props.adoptID,
            user_id:userID,
            type:Identify,
            comment:textarea.value,
            score:stars.value
        });
        const result = response.data;
        console.log(result);
        if (response.status === 200){
                // 可以根据需要添加更多逻辑，比如刷新页面数据、更新相关状态等
                    ElMessage({
                        message: '感谢作出评价！',
                        type: 'success',
                        style: 'font-size:25px;font-weight:bold;',
                        offset: 55,
                        grouping:true
                    })
                    dialogVisible = false;
                      sessionStorage.setItem(`showbtn-${props.passageID}-${userID}`, false);                  
                    }

        
    }catch (error){
        alert('评价出错');
        console.log("error");
    }
        const response1 =  await axios.post(`http://localhost:8080/adopt/application/updateprogress`, {
            adopt_id: props.adoptID,
            adopt_process: props.process+1,
        });
        console.log("更新进程返回消息");
        const result = response1.data;
        console.log(result);
        if (response1.status === 200){
                // 可以根据需要添加更多逻辑，比如刷新页面数据、更新相关状态等                   
        }

    setTimeout(() => {
        window.location.reload();  // 刷新页面
      }, 500); // 500毫秒
}
const getActiveStep=(process1) =>{
      // 自定义逻辑来确定 active 的值
      if (process1 === 0) {
        return 1; // 如果 process 是 0，返回 1
      } 
       else {
        return process1; // 其他情况返回 process 自身
      }
      }
</script>

<template>
  <el-card
    style="width: 80%; height: auto; border-radius: 20px; margin-top:10px; margin-left: 10%;"
  >
    <el-col>
      <el-steps
        style="max-width: 100%; margin-left: 20px;"
        :space="200"
        :active="getActiveStep(process1)"
        finish-status="success"
        align-center
      >
        <el-step title="递交申请" />
        <el-step title="审核申请" />
        <el-step title="审核通过" />
        <el-step title="成功领养" />
        <el-step
    title="双方完成评价"
    :status="process1 === 6 ? 'success' : 'wait'"
  />
      </el-steps>
      <el-row :gutter="120" style="display: flex; justify-content: space-between;">
        <el-col
          :span="8"
          style="margin-top: 20px; display: flex; flex-direction: column; align-items: center;"
        >
          <el-avatar
            class="avatar"
            :src="applyprofilePhoto"
            fit="cover"
            shape="circle"
            size="40"
          />
          <div style="margin-left: 0px;">申请方：{{ applyuName }}</div>
        </el-col>
        <el-button
         v-if="process === 3"
          @click="adoptsuccuss"
          round
          size="large"
          span="8"
          style="margin-top: 50px;"
          class="edit"
          >领养成功</el-button
        >
        <el-button
         v-if="(process === 4||process===5)&&showbtn===true"
          @click="dialogVisible = true"
          round
          size="large"
          span="8"
          style="margin-top: 50px;"
          class="edit"
          >评价对方</el-button
        >
        <el-button
         v-if="process === 3"
          @click="adoptfail "
          round
          size="large"
          span="8"
          style="margin-top: 50px;"
          class="edit"
          >领养失败</el-button
        >
        <el-col
          :span="8"
          style="margin-top: 20px; display: flex; flex-direction: column; align-items: center;"
        >
          <el-avatar
            class="avatar"
            :src="promoteprofilePhoto"
            fit="cover"
            shape="circle"
            size="40"
          />
          <div>审核方：{{ promoteuName }}</div>
        </el-col>
      </el-row>
    </el-col>
  </el-card>

  <el-dialog
    style="align-items: center;"
    v-model="dialogVisible"
    width="300"
    height="500"
    align-center
  >
    <el-row style="align-items: center; margin-left: 10px;">
      <span>请输入星级：</span>
      <el-rate v-model="stars" size="large" style="margin-top: 0%;" />
    </el-row>
    <el-input
      v-model="textarea"
      style="width: 240px; margin-left: 10px;"
      :rows="5"
      type="textarea"
      placeholder="说点什么..."
    />
    <template #footer>
      <div class="dialog-footer">
        <el-row justify="center">
          <el-button @click="dialogVisible = false" class="edit">取消</el-button>
          <el-button type="primary" @click="Makeappraise" class="edit">
            确认
          </el-button>
        </el-row>
      </div>
    </template>
  </el-dialog>
</template>


<style scoped>
::v-deep .el-step__head.is-success {
  color: 	rgb(255, 212, 102);
  border-color: rgb(255, 212, 102);
}
::v-deep .el-step__title.is-success {
    font-weight: bold;
    color: rgb(34, 30, 30);
}

::v-deep .el-step__head {
    color: 	rgb(255, 212, 102);
    border-color: rgb(255, 212, 102);
}
::v-deep .el-step__line-inner{
       border-color: #ffd466 !important;
     }
.edit {
  color: #fff;
  background-color: rgb(255, 212, 102);
  border-color: rgb(255, 212, 102);
}
::v-deep(.edit:hover) {
  background-color: #ffe9b2;
  border-color: rgb(241, 224, 180);
  color: rgb(255, 255, 255);
}
</style>